<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增数据空间管理')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-spaceManage-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label">空间名称：</label>
                <div class="col-sm-8">
                    <input name="spaceName" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">选用空间：</label>
                <div class="col-sm-8">
                    <select class="form-control m-b" name="spacePath" id="spacePathSelect">
                        <option th:each="spaceManage:${spaceManageList}" th:value="${spaceManage.spacePath}" th:text="${spaceManage.spaceDeviceName} + '(' + ${spaceManage.spaceTotalVolume} + 'GiB)'" 
                        th:deviceName="${spaceManage.spaceDeviceName}" th:totalVolume="${spaceManage.spaceTotalVolume}" th:freeVolume="${spaceManage.spaceFreeVolume}"></option>
                    </select>
                </div>
            </div>
            <!-- 
            <div class="form-group">    
                <label class="col-sm-3 control-label">空间路径：</label>
                <div class="col-sm-8">
                    <input name="spacePath" class="form-control" type="text">
                </div>
            </div>
           -->
           <div class="form-group">    
                <label class="col-sm-3 control-label">设备名称：</label>
                <div class="col-sm-8">
                    <input name="spaceDeviceName" id="spaceDeviceName" class="form-control" type="text" readonly>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">创建时总容量：</label>
                <div class="col-sm-8">
                    <input name="spaceTotalVolume" id="spaceTotalVolume" class="form-control" type="text" readonly>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">创建时可用容量：</label>
                <div class="col-sm-8">
                    <input name="spaceFreeVolume" id="spaceFreeVolume" class="form-control" type="text" readonly>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">空间属性：</label>
                <div class="col-sm-8">
                    <select id="spaceAttrSelect" class="form-control m-b" name="spaceAttribute">
                        <option value="0">永久空间</option>
                        <option value="1">临时空间</option>
                        <option value="2">用户空间</option>
                    </select>
                </div>
            </div>
            <!-- 
            <div class="form-group">    
                <label class="col-sm-3 control-label">创建时总容量(bytes)：</label>
                <div class="col-sm-8">
                    <input name="spaceTotalVolume" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">创建时可用容量(bytes)：</label>
                <div class="col-sm-8">
                    <input name="spaceFreeVolume" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">所属用户id：</label>
                <div class="col-sm-8">
                    <input name="belongUserId" class="form-control" type="text">
                </div>
            </div>
             -->
            <div class="form-group" style="display:none" id="belongUserDiv">    
                <label class="col-sm-3 control-label">分配给用户：</label>
                <div class="col-sm-8">
                    <select class="form-control m-b" name="belongUserId">
                        <option th:each="user:${userList}" th:value="${user.userId}" th:text="${user.loginName}"></option>
                    </select>
                </div>
            </div>
            <!-- 
            <div class="form-group">    
                <label class="col-sm-3 control-label">删除标志：</label>
                <div class="col-sm-8">
                    <input name="spaceDeleteFlag" class="form-control" type="text">
                </div>
            </div>
             -->
            <div class="form-group">    
                <label class="col-sm-3 control-label">是否启用：</label>
                <div class="col-sm-8">
                    <select class="form-control m-b" name="spaceStopFlag">
                        <option value="1">启用</option>
                        <option value="0">停用</option>
                    </select>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var prefix = ctx + "system/spaceManage"
        $("#form-spaceManage-add").validate({
            focusCleanup: true
        });
        
        $('#spaceAttrSelect').change(function(){ 
        	var selectedValue = $(this).children('option:selected').val();
        	if(selectedValue == "2"){//用户空间
        		$('#belongUserDiv').css("display","block");
        	}else{
        		$('#belongUserDiv').css("display","none");
        	}
        });
        
        //spacePathSelect
        $('#spacePathSelect').change(function(){ 
        	var deviceName = $(this).children('option:selected').attr("deviceName");
        	var totalVolume = $(this).children('option:selected').attr("totalVolume");
        	var freeVolume = $(this).children('option:selected').attr("freeVolume");
        	
        	$("#spaceDeviceName").val(deviceName);
        	$("#spaceTotalVolume").val(totalVolume);
        	$("#spaceFreeVolume").val(freeVolume);
        });
		
        /**
        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-spaceManage-add').serialize());
            }
        }
        **/
    </script>
</body>
</html>